<script setup>
	import {
		ref
	} from 'vue'

	// 分享数据
	const shareData = ref({
		title: '推荐这个小程序',
		path: '/pages/index/index',
		imageUrl: '/static/share.jpg',
		queryParams: {
			from: 'share',
			userId: '123'
		}
	})

	// 构建分享路径
	const buildSharePath = () => {
		const params = new URLSearchParams(shareData.value.queryParams)
		return `${shareData.value.path}?${params.toString()}`
	}

	// 分享给好友
	const onShareAppMessage = (res) => {
		if (res.from === 'button') {
			console.log('来自按钮的分享:', res.target)
		}
		return {
			title: shareData.value.title,
			path: buildSharePath(),
			imageUrl: shareData.value.imageUrl,
			success(res) {
				console.log('分享成功', res)
				uni.showToast({
					title: '分享成功'
				})
			},
			fail(err) {
				console.log('分享失败', err)
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}
	}

	// 分享到朋友圈
	const onShareTimeline = () => {
		return {
			title: shareData.value.title,
			query: `from=timeline&userId=${shareData.value.queryParams.userId}`,
			imageUrl: shareData.value.imageUrl
		}
	}

	// 显示朋友圈分享提示
	const showTimelineTip = () => {
		uni.showModal({
			title: '分享到朋友圈',
			content: '请点击右上角"···"菜单，选择"分享到朋友圈"',
			showCancel: false
		})
	}

	// 更新分享内容
	const updateShareContent = () => {
		shareData.value = {
			title: `新分享标题-${Date.now()}`,
			path: '/pages/index/index',
			imageUrl: '/static/new-share.jpg',
			queryParams: {
				from: 'updated',
				userId: '456'
			}
		}
		uni.showToast({
			title: '已更新分享内容'
		})
	}

	// 暴露方法给模板
	defineExpose({
		onShareAppMessage,
		onShareTimeline
	})
</script>

<template>
	<view class="share-container">
		<button class="share-btn" open-type="share" style="display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
		background-color: #fff;
		line-height: none;
		border: none;
		    height: 60px;">
			<uni-icons type="weixin" color="green" size="60"></uni-icons>
		</button>
		<button class="share-btn" @click="showTimelineTip" style="display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
		background-color: #fff;
		line-height: none;
		border: none;
		    height: 60px;">
			<uni-icons type="pyq" color="green" size="60"></uni-icons>
		</button>
	</view>
</template>

<style scoped>
	.share-container {
		display: flex;
		justify-content: center;
		gap: 40rpx;
	}

	.share-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
		background-color: #fff;
		line-height: none;
		border: none;

	}

</style>